<template>
  <nav class="region region--full">
    <div class="column column--full masthead j-masthead full-width">
      <div class="logo">
        <router-link to="/marketPickets">
          <!-- Market<span class='watch'>Watch</span>
                    <span class='picks'>PICKS</span> -->
          <img src="../../assets/logoSon.png" />
        </router-link>
      </div>
      <ul id="nav__menu" class="list list--menu j-list">
        <li  v-for="item in listlinkData" :key="item.id" :class="[{ active: menuIndex === item.id }, 'menu__item']"
          @click="tabclick(item)">
            {{ item.typeName }}

        </li>
        <li class="isShow menu__item item--more" @click="itemMore">
          More<el-icon class="icon" style="padding-top: 24px">
            <CaretBottom />
          </el-icon>
          <div id="j-nav__more" class="more__dropdown j-more__dropdown" v-if="isShow">
            <router-link v-for="(v, i) in moreList" :key="i" :to="v.path">{{
              v.title
            }}</router-link>
          </div>
        </li>
      </ul>
      <!-- 图像部分 -->
      <div class="profile logged-in">
        <label class="btn--text btn--profile j-toggle-label" @click="isProfile = !isProfile"
          title="Toggle account settings">
          <span class="screen-reader-text">Account Menu</span>
        </label>
        <ul class="profile__menu j-menu-contents j-toggle--profile" v-if="isProfile">
          <li class="profile__item profile--name divider">he xf</li>
          <!-- <li class="profile__item">
            <router-link to="">Customer Center</router-link>
          </li>
          <li class="profile__item">
            <router-link to="">Watchlist</router-link>
          </li>
          <li class="profile__item">
            <router-link to="">Newsletters</router-link>
          </li>
          <li class="profile__item">
            <router-link to="">Price Alerts</router-link>
          </li>
          <li class="profile__item divider">
            <router-link to="">Games</router-link>
          </li> -->
          <li class="profile__item">
            <router-link to="login">Log Out</router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const listlinkData = ref([]);
const ispicks = ref(false);
const menuIndex = ref(-1);
console.log(menuIndex)
function tabclick(item) {
  console.log(item)
  if (item.typeName === "Money") {
    menuIndex.value = item.id
    console.log(menuIndex)
    router.push("/marketPickets/money")
  }
  if (item.typeName === "Real Estate") {
    router.push("/marketPickets/estate")

    menuIndex.value = item.id
    console.log(menuIndex)
  }
  if (item.typeName === "Retirement") {
    menuIndex.value = item.id
    router.push("/marketPickets/retirement")
    console.log(menuIndex)
  }
  if (item.typeName === "Banking") {
    menuIndex.value = item.id
    router.push("/marketPickets/banking")
    console.log(menuIndex)
  }
  if (item.typeName === "Lifestyle") {
    menuIndex.value = item.id
    router.push("/marketPickets/lifestyle")
  }
  if (item.typeName === "") {
    menuIndex.value = item.id
    router.push("/marketPickets")
  }
}
onMounted(async () => {
  const data = localStorage.getItem("tabMdData");
  listlinkData.value = JSON.parse(data).picks;
  console.log(listlinkData.value, "listlinkData.value");
  ispicks.value = true;
  let item = ({
    typeName: ""
  })
  tabclick(item);
});
// const menuList = reactive([
//   {
//     title: "Money",
//     path: "/marketPickets/money",
//   },
//   {
//     title: "Real Estate",
//     path: "/marketPickets/realEstate",
//   },
//   {
//     title: "Retirement",
//     path: "/marketPickets/retirement",
//   },
//   {
//     title: "Banking",
//     path: "/marketPickets/bank",
//   },
//   {
//     title: "Lifestyle",
//     path: "/marketPickets/lifestyle",
//   },
// ]);
const moreList = reactive([
  { title: "Guides", path: "" },
  { title: "Sinopoly Watch Home", path: "/index" },
]);
const isShow = ref(false);
const isProfile = ref(false);
const itemMore = () => {
  isShow.value = !isShow.value;
};


// watch(
//   () => router.currentRoute.value,
//   (newValue) => {
//     if (menuPath.value === newValue.fullPath) {
//     menuIndex.value = index;
//     }
//   },
//   { immediate: true }
// );
// 监听window的点击事件
window.addEventListener("click", (event) => {
  // 如果点击的不是模态框和按钮，则隐藏模态框
  if (
    event.target !== event.currentTarget &&
    !event.target.closest(".isShow")
  ) {
    isShow.value = false;
  }
});
</script>

<style scoped lang="scss">
.region--full {
  border-bottom: 1px solid #999;
  background: #fff;
}

.masthead {
  background: #fff;
  max-width: 1280px;
  margin: 0 auto;
}

.logo {
  color: #000;
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
}

.watch {
  color: #69ee11;
}

.picks {
  color: #fff;
  display: inline-block;
  width: 88px;
  line-height: 26px;
  background: #000;
  text-align: center;
}

.masthead .logo {
  margin-left: 0;
  -webkit-flex: 0 0 300px;
  -ms-flex: 0 0 300px;
  flex: 0 0 300px;
  width: 300px;
  margin-right: 0;
}

#nav__menu {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.list--menu {
  overflow: inherit;

  .menu__item {
    color: #2e2e2e;
    border-bottom: 3px solid #fff;
  }
}

.list--menu .menu__item:hover:not(.is-active) {
  color: #367f2e;
  border-color: #367f2e;
}

.menu__item.item--more .more__dropdown {
  background: #fff;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  position: absolute;
  padding: 10px 0;
  top: 100%;
  left: -20px;
  z-index: 9;
  display: block;
}

.list--menu li.active {
  color: #367f2e;
  border-color: #367f2e;
}

.more__dropdown a {
  color: #262626 !important;
}
</style>
